<template>
  <div class="page luckdraw-me">
    <div class="luckdraw-me-container">
      <div class="user">
        <user-link
          :title="userInfo.nickName"
          :icon="userInfo.avatarUrl"
          addon="收货地址"
          isLast
          :phone="phone"
          :showBindBtn="showBindBtn"
          @on-bind-phone-click="onBindPhoneClick"
          @on-phone-click="onPhoneClick"
          @on-address-click="onChooseAddress">
        </user-link>
      </div>
      <div class="entrance">
        <div class="entrance-item" @click="onEntranceItemClick('all')">
          <div class="inner">
            <div class="value">{{activityCount.in}}</div>
            <div class="label">参与的抽奖</div>
          </div>
        </div>
        <div class="entrance-item" @click="onEntranceItemClick('self')">
          <div class="inner">
            <div class="value">{{activityCount.create}}</div>
            <div class="label">发起的抽奖</div>
          </div>
        </div>
        <div class="entrance-item" @click="onEntranceItemClick('win')">
          <div class="inner">
            <div class="value">{{activityCount.win}}</div>
            <div class="label">中奖记录</div>
          </div>
        </div>
      </div>
      <div class="group">
        <m-link title="我的金币" :icon="icons.coin" link="/pages/coin/main" :addon="coinCount" :isColor="true"></m-link>
        <m-link title="金币交易市场" :icon="icons.trade" isLast link="/pages/coin-market/main"></m-link>
      </div>
      <div class="group">
        <m-link title="邀请好友" :icon="icons.invite" isLast link="/pages/invite/main"></m-link>
      </div>
      <div class="group">
        <m-link title="成为赞助商" :icon="icons.sponsor" link="/pages/sponsor/main"></m-link>
        <m-link title="小程序推荐" :icon="icons.mp" link="/pages/recommend/main"></m-link>
        <m-link title="申请关联小程序" :icon="icons.connect" isLast link="/pages/connect/main"></m-link>
      </div>
      <div class="group">
        <m-link title="设置" :icon="icons.setting" isLast link="/pages/setting/main"></m-link>
      </div>
      <m-tabbar current="2"></m-tabbar>
    </div>
  </div>
</template>

<script>
import MLink from 'comp/m-link'
import UserLink from 'comp/user-link'
import MTabbar from 'comp/m-tabbar'
import mixins from 'comp/mixins'
import { getUserInfo, chooseAddress } from '@/utils/wx'

export default {
  mixins: [mixins],
  components: {
    MLink,
    UserLink,
    MTabbar
  },
  data () {
    return {
      icons: {
        mp: `${require('static/images/mp-c.png')}`,
        sponsor: `${require('static/images/sponsor-c.png')}`,
        info: `${require('static/images/info.png')}`,
        setting: `${require('static/images/setting-c.png')}`,
        coin: `${require('static/images/coin-c.png')}`,
        trade: `${require('static/images/trade-c.png')}`,
        connect: `${require('static/images/connect-c.png')}`,
        invite: `${require('static/images/invite-c.png')}`
      },
      userInfo: {},
      activityCount: {
        in: 0,
        create: 0,
        win: 0
      },
      coinCount: '',
      phone: '',
      showBindBtn: false
    }
  },
  onShow () {
    this.getActivityCount()
    this.getCoinCount()
    this.getPhone()
  },
  mounted () {
    this.init()
  },
  methods: {
    /**
     * 初始化
     */
    async init () {
      try {
        const res = await getUserInfo()
        this.userInfo = res.userInfo
      } catch (e) {
        console.log(e)
      }
    },
    /**
     * 获取抽奖的统计数
     */
    async getActivityCount () {
      const openId = await this.getOpenId()
      const ret = await this.$store.dispatch('getActivityCount', {
        playerid: openId
      })
      if (ret) {
        this.activityCount = ret
      }
    },
    /**
     * 获取金币总数
     */
    async getCoinCount () {
      const openId = await this.getOpenId()
      const ret = await this.$store.dispatch('queryPlayerStatistic', {
        noToast: true,
        playerid: openId
      })
      this.coinCount = ret.gold
    },
    /**
     * 获取绑定的手机号
     */
    async getPhone () {
      const openId = await this.getOpenId()
      const ret = await this.$store.dispatch('getPlayerInfo', {
        noToast: true,
        playerid: openId
      })
      if (ret && ret.phone) {
        this.phone = ret.phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3')
        this.showBindBtn = false
      } else {
        this.showBindBtn = true
      }
    },
    /**
     * 绑定手机号
     */
    onBindPhoneClick () {
      wx.navigateTo({
        url: '/pages/mobile-edit/main',
      })
    },
    /**
     * 查看绑定的手机号
     */
    onPhoneClick () {
      wx.navigateTo({
        url: '/pages/mobile/main',
      })
    },
    /**
     * 选择收货地址，并上传到后台
     */
    async onChooseAddress () {
      const openId = await this.getOpenId()
      const addressData = await chooseAddress()
      const ret = await this.$store.dispatch('doPlayerUpsert', {
        playerid: openId,
        playeraddr: JSON.stringify(addressData)
      })
      if (ret) {
        wx.showToast({
          icon: 'success',
          title: '已保存',
          duration: 2000
        })
      }
    },
    onEntranceItemClick (route) {
      wx.navigateTo({
        url: `/pages/record/main?type=${route}`,
      })
    }
  },
}
</script>

<style lang="less" scoped>
.luckdraw-me {
  &-container {
    padding-bottom: 134rpx;
  }
  .entrance {
    display: flex;
    background-color: #fff;
    border-top: 1rpx solid #e6ebf0;
    &-item {
      flex: 1;
      text-align: center;
      padding: 50rpx 0;
      &:active {
        background: #d8d8d8;
      }
      &:not(:last-child) .inner {
        border-right: 1rpx solid #e6ebf0;
      }
      .value {
        font-size: 40rpx;
        font-weight: bold;
        color: #000;
      }
      .label {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
  .group {
    margin-top: 20rpx;
  }
}
</style>
